<template>
  <div class="view-container">
    <div class="title-box animate__animated animate__fadeInDown">
      <h1 class="view-title">宿舍系统数据</h1>
    </div>
    <div class="main-container animate__animated animate__lightSpeedInLeft">
      <div class="data-box">
        <el-card>
          <div class="chart-box">
            <div class="chart" id="demo1"></div>
            <div class="chart-description" style="height: 55vh">
              <h1 style="margin: 20px;font-weight: bold;font-size: 20px">宿舍分布情况</h1>
              <div style="height: 20vh;margin: 20px;display: flex;align-items: center">
                <p>各个校区宿舍数量占比情况</p>
              </div>
            </div>
          </div>

        </el-card>
      </div>

      <div class="data-box">
        <el-card>
          <div class="chart-box2" style="width: 100%">
            <div class="chart" id="demo2" style="width: 100%; height: 55vh;"></div>
          </div>
        </el-card>
      </div>

    </div>
  </div>
</template>

<script setup>
import {
  onBeforeUnmount,
  onMounted,
  reactive,
  ref
} from 'vue';
import * as echarts from "echarts";

/*------变量定义开始------*/
let demo1Chart

const demo1Option = reactive(
    {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {

      },
      series: [
        {
          name: '宿舍数',
          type: 'pie',
          selectedMode: 'single',
          radius: [0, '30%'],
          label: {
            position: 'inner',
            fontSize: 14
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1548, name: '南校区' },
            { value: 775, name: '校本部', selected: true  },
            { value: 679, name: '铁道校区' },
            { value: 679, name: '湘雅校区' }
          ]
        },
        {
          name: '宿舍数',
          type: 'pie',
          radius: ['45%', '60%'],
          labelLine: {
            length: 30
          },
          label: {
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
            backgroundColor: '#F6F8FC',
            borderColor: '#8C8D8E',
            borderWidth: 1,
            borderRadius: 4,
            rich: {
              a: {
                color: '#6E7079',
                lineHeight: 22,
                align: 'center'
              },
              hr: {
                borderColor: '#8C8D8E',
                width: '100%',
                borderWidth: 1,
                height: 0
              },
              b: {
                color: '#4C5058',
                fontSize: 14,
                fontWeight: 'bold',
                lineHeight: 33
              },
              per: {
                color: '#fff',
                backgroundColor: '#4C5058',
                padding: [3, 4],
                borderRadius: 4
              }
            }
          },
          data: [
            { value: 15480, name: '南校区宿舍数' },
            { value: 7750, name: '校本部宿舍数' },
            { value: 6790, name: '铁道校区宿舍数' },
            { value: 6790, name: '湘雅校区宿舍数' },
          ]
        }
      ]
    }
);

//demo2
let demo2Chart;

const data = [
  {
    name: '南校区',
    value: 24000
  },
  {
    name: '校本部',
    value: 16000
  },
  {
    name: '铁道校区',
    value: 8000
  },
  {
    name: '湘雅校区',
    value: 12000
  }
];
const data1 = [
  {
    name: '南校区',
    value: 12000
  },
  {
    name: '校本部',
    value: 9000
  },
  {
    name: '铁道校区',
    value: 5000
  },
  {
    name: '湘雅校区',
    value: 4000
  }
];
const data2 = [
  {
    name: '南校区',
    value: 12000
  },
  {
    name: '校本部',
    value: 7000
  },
  {
    name: '铁道校区',
    value: 3000
  },
  {
    name: '湘雅校区',
    value: 8000
  }
];


  const demo2Option = reactive(
      {
        title: [
          {
            text: '各个校区宿舍其他数据',
            left: 'center'
          },
          {
            subtext: '各校区本科生宿舍数量情况',
            left: '16.67%',
            top: '75%',
            textAlign: 'center'
          },
          {
            subtext: '各校区男生宿舍数量情况',
            left: '50%',
            top: '75%',
            textAlign: 'center'
          },
          {
            subtext: '各校区女生宿舍数量情况',
            left: '83.33%',
            top: '75%',
            textAlign: 'center'
          }
        ],
        series: [
          {
            type: 'pie',
            radius: '25%',
            center: ['50%', '50%'],
            data: data,
            label: {
              position: 'outer',
              alignTo: 'none',
              bleedMargin: 5
            },
            left: 0,
            right: '66.6667%',
            top: 0,
            bottom: 0
          },
          {
            type: 'pie',
            radius: '25%',
            center: ['50%', '50%'],
            data: data1,
            label: {
              position: 'outer',
              alignTo: 'labelLine',
              bleedMargin: 5
            },
            left: '33.3333%',
            right: '33.3333%',
            top: 0,
            bottom: 0
          },
          {
            type: 'pie',
            radius: '25%',
            center: ['50%', '50%'],
            data: data2,
            label: {
              position: 'outer',
              alignTo: 'edge',
              margin: 20
            },
            left: '66.6667%',
            right: 0,
            top: 0,
            bottom: 0
          }
        ]
      }
  )

/*------变量定义结束------*/

/*------钩子开始------*/
onMounted(() => {
  demo1Chart = echarts.init(document.getElementById("demo1"))
  demo1Chart.setOption(demo1Option)

  demo2Chart = echarts.init(document.getElementById("demo2"))
  demo2Chart.setOption(demo2Option)
})
onBeforeUnmount(() => {
  demo1Chart.dispose()
})
/*------钩子结束------*/

/*------函数定义开始------*/
/*------函数定义结束------*/
</script>



<style scoped>
.view-container{
  padding-top: 20px;
  width: 90%;
  overflow: hidden;
}
.title-box{
  animation-duration: 0.5s;
}
.view-title{
  font-size: 40px;
  font-weight: bolder;
  margin-bottom: 30px;
}
.main-container{
  width: 100%;
  height: 125vh;
  background-color: #27B3FF;
}
.data-box{
  margin-bottom: 2vh;
}
.chart{
  width: 100%;
  height: 60vh;
}
.chart-description{
  width: 100%;
  background-color: #c5e7fa;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart-box{
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 2%;
}

</style>
